<template>
  <el-form
    ref="queryFormRef"
    :inline="true"
    :label-position="fieldOptions.labelPosition || 'right'"
    :label-width="fieldOptions.labelWidth || '100px'"
    :model="fieldForm"
    class="rt-query"
    :style="{ height: height }"
    size="small"
  >
    <el-row
      v-for="(item, index) in fieldList"
      :key="'row' + index"
      :gutter="60"
    >
      <el-col
        v-for="(item1, index1) in item.children"
        :span="item1.span || 6"
        :offset="item1.offset || 0"
        :key="'col' + index1"
      >
        <el-form-item
          :label="item1.label + item1.labelSuffix || ''"
          :style="{ width: '100%' }"
        >
          <!-- 输入框 -->
          <el-input
            :style="{ width: '100%' }"
            v-if="item1.formType === 'text'"
            v-model="fieldForm[item1.field]"
            :placeholder="item1.placeholder"
            clearable
          />
          <!-- 下拉 -->
          <el-select
            :style="{ width: '100%' }"
            v-else-if="item1.formType === 'select'"
            v-model="fieldForm[item1.field]"
            clearable
            placeholder="Select"
          >
            <el-option
              v-for="opItem in item1.options"
              :key="opItem.value"
              :label="opItem.label"
              :value="opItem.value"
            />
          </el-select>
          <!-- 时间 -->
          <el-date-picker
            v-else-if="item1.formType === 'datetimerange'"
            v-model="fieldForm[item1.field]"
            type="datetimerange"
            :start-placeholder="item1.startPlaceholder"
            :end-placeholder="item1.endPlaceholder"
          />
          <!-- 自定义插槽 -->
          <slot
            v-else-if="item1.formType === 'solt'"
            :name="item1.soltName"
          ></slot>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <!-- 展开关闭控制 -->
  <div class="rt-ft">
    <el-row :gutter="20" v-if="fieldList.length > 3">
      <el-col :span="24">
        <div class="rt-query-foot-btn">
          <div class="btn-box" v-if="!showOpenBtn" @click="handleOpenBtn(1)">
            <span>展开</span><el-icon><CaretBottom /></el-icon>
          </div>
          <div class="btn-box" v-else @click="handleOpenBtn(2)">
            <span>折叠</span><el-icon><CaretTop /></el-icon>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 分割符号 -->
    <el-row :gutter="60">
      <el-col :span="24">
        <el-divider border-style="dashed" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { defineExpose } from "vue";

const { proxy } = getCurrentInstance();

// 是否显示展开
const showOpenBtn = ref(false);
// 查询栏目的高度
const height = ref("auto");
const props = defineProps({
  fieldOptions: {
    type: Object,
  },
  fieldForm: {
    type: Object,
  },
  fieldList: {
    type: Array,
  },
});

/**重置表单 */
function resetForm() {
  proxy.resetForm("queryFormRef");
}
/**控制展开和关闭 */
function handleOpenBtn(val) {
  showOpenBtn.value = val == 1 ? true : false;
}

const fieldListMaxLength = computed(() => {
  let num = props.fieldList.length >= 3 ? 3 : props.fieldList.length;
  return num;
});

/**点击展开触发高度变化 */
watch(
  () => showOpenBtn.value,
  (value) => {
    if (value) {
      height.value = props.fieldList.length * 42 + "px";
    } else {
      height.value = fieldListMaxLength.value * 42 + "px";
    }
  }
);
onMounted(() => {
  height.value = fieldListMaxLength.value * 42 + "px";
});

defineExpose({
  resetForm,
});
</script>

<style lang="scss" scoped>
.rt-query {
  padding: 10px 20px;
  overflow: hidden;
  transition: height 1s;
}

.rt-query-foot-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .btn-box {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
  }
}
.rt-ft {
  padding: 0 20px;
}
</style>
<style scoped>
.hide-enter-active {
  animation: scsle-in 0.5s;
}

.hide-leave-active {
  animation: scsle-in 0.5s reverse;
}
@keyframes scsle-in {
  0% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
</style>
